<template>
  <div id="login">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <EvInput
          :rules="/^1\d{10}$/"
          v-model="user.username"
          msg="请输入11位手机号"
          placeholder="请输入手机号"
        ></EvInput>
        <EvInput
          type="password"
          :rules="/^.{3,16}$/"
          v-model="user.password"
          msg="请输入3~6位数密码"
          placeholder="请输入密码"
        ></EvInput>
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <EvButton type="primary" @click.native="login">登录</EvButton>
    </div>
  </div>
</template>

<script>
import { userLogin } from "@/apis/user.js";
import EvButton from "@/components/ev-button.vue";
import EvInput from "@/components/ev-input.vue";
export default {
  components: {
    EvButton,
    EvInput,
  },
  data() {
    return {
      user: {
        username: "17612196674",
        password: "123456",
      },
    };
  },

  methods: {
    async login() {
      // 进行登录验证
      let userTest = /^1\d{10}$/.test(this.user.username);
      console.log(userTest);
      let passTest = /^.{3,16}$/.test(this.user.password);
      if (userTest && passTest) {
        const res = await userLogin(this.user);
        console.log(res);
        if (res.data.message === "登录成功") {
          // 将token值存储在本地
          localStorage.setItem("EvToken", res.data.data.token);
          //  跳转到个人中心
          this.$router.push({ path: `/personal/${res.data.data.user.id}` });
          this.$toast.success(res.data.message);
        } else {
          //   提示
          this.$toast.fail(res.data.message);
        }
      } else {
        // 提示用户数据输入不合法
        this.$toast.fail({ message: "数据输入不合法", duration: 3000 });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>